<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="Application">
        <container-component>
            <template #header>
                <h1>这里是头部内容</h1>
            </template>
            <template #body>
                <p>这里是主体内容</p>
            </template>
        </container-component>
    </div>
    <script>
        const App = Vue.createApp()
        const containerComponent = {
            template:`<div style="border-style:solid;border-color:red;border-width:10px">
                <slot name="body">插槽默认内容</slot>
                ------------------------------------
                <slot name="header">插槽默认内容</slot>
                
            </div>`
        }
        App.component("container-component", containerComponent)
        App.mount("#Application")
    </script>
</body>